<template>
	<view class="word_details_box" :style="{'paddingTop': statusBarHeight + 'px'}">
		<view class="header">
			<uni-nav-bar left-icon="left" :border="false" @clickLeft="clickLeft" backgroundColor="0">
				<block slot="right">
					<view class="icons">
						<view class="icon_item" @tap="addNewWord(status)">
							<uni-icons :type="status ==1 ? 'star-filled' : 'star'" :color="status ==1  ? '#6BD52B' : '#b3e4ff'" size="28" />
						</view>
						<view class="icon_item" @tap="addfamiliarWord(hardStatus)">
							<uni-icons :type="hardStatus==1 ? 'wallet-filled' : 'wallet'" :color="hardStatus==1 ? '#6BD52B' : '#b3e4ff'" size="28" />
						</view>
					</view>
				</block>
			</uni-nav-bar>
		</view>
		
		<view class="box">
			<scroll-view scroll-y class="scroll_view">
				<view v-if="wordInfo && wordInfo !== undefined">
					<view class="word_item" style="padding: 30rpx;background-color: #d7f1ff;">
						<view class="word_title">{{ wordInfo.word }}</view>
						<view class="audios flex_ac">
							<view class="audio">
								<text>英/ {{ wordInfo.phonetic }} /</text>
								<uni-icons type="sound-filled" ></uni-icons>
							</view>
							<view class="audio">
								<text>美/ {{ wordInfo.phonetic }} /</text>
								<uni-icons type="sound-filled" ></uni-icons>
							</view>
						</view>
						<view class="text">
							<view >{{ wordInfo.annotation }}</view>
						</view>
					</view>
					
					<view class="word_item">
						<view class="title">记忆</view>
						<view class="item_box">
							{{wordInfo.mnemonic}}
						</view>
					</view>
					
					<view class="word_item">
						<view class="title">例句</view>
						<view class="item_box">
							<view>{{wordInfo.exampleSentence}}</view>
						</view>
					</view>
					
					<view class="word_item">
						<view class="title">近义词</view>
						<view class="item_box">
							{{wordInfo.synonyms}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- <view class="btns flex_js"> -->
			<!-- <view class="btn btn1" @tap="goToPage(`/pages/homes/spelling/spelling?type=${opt.type}` + '&id=' + opt.id)">自然拼读</view> -->
			<!-- <view class="btn btn2" @tap="goToPage(`/pages/homes/fontPractice/fontPractice?word=${wordInfo.word}&phonetic=${wordInfo.phonetic}&annotation=${wordInfo.annotation}`)">字体练习</view> -->
			<!-- <block v-if="opt.type !== 'search'">
				<view class="btn btn3" @tap="wordPrev">上一个</view>
				<view class="btn btn3" @tap="wordNext">下一个</view>
			</block> -->
		<!-- </view> -->
	</view>
</template>

<script>
	import { searchWord, reviewWordBook, reviewWordPlan, listWord, wordByPlan, reciteWord, readWord ,addCollect,addHard,getStatus,
		cancelStatus,
		cancelHardWord,
		getHardStatus} from '@/api/word/word.js'
	
	export default {
		data() {
			return {
				opt: {
					id: '',
					type: '',
				},
				wordInfo: {},
				statusBarHeight: 0,
				isAddNewWord: false,
				isAddfamiliarWord: false,
				currentStep: 1,
				
				status:'',
				hardStatus:'',
				// words: []
			}
		},
		onLoad(options) {
			this.status = options.status
			this.hardStatus = options.status
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.statusBarHeight = res.statusBarHeight
				}
			})
			
			this.opt = options
			console.log(options);
			// if (options.type === 'search') {
			this.getWordDetailsSearch(this.opt.id)
			// } else if (options.type === 'bookReview') {
			// 	this.getWordDetailsReview(this.opt.id)
			// } else if (options.type === 'planReview') {
			// 	this.getWordDetailsPlan(this.opt.id)
			// } else if (options.type === 'bookStudy') {
			// 	this.getWordData(this.opt.id)
			// } else if (options.type === 'planStudy') {
			// 	this.getWordByPlan(this.opt.id)
			// }
		},
		methods: {
			goToPage(url) {
				uni.navigateTo({
					url
				})
			},
			clickLeft() {
				uni.navigateBack()
			},
			showToast(title, icon) {
				uni.showToast({
					title,
					icon
				})
			},
			addNewWord(status) {
				console.log(status);
				let bool = false
				if (status == 0) {
					bool = true
				}
				//type =1 为生词    true为加入
				this.setReciteWord(1,bool)
			},
			addfamiliarWord(status) {
				let bool = false
				if (status == 0) {
					bool = true
				}
				this.setReciteWord(2,bool)
			},
			// 单词加入生词库|熟词库
			async setReciteWord(type,bool) {
				console.log("当前单词",this.wordInfo);
				//加入生词库
				if (type === 1) {
					if (bool) {
						let data ={
							word:this.wordInfo.word,
							pronunciation:this.wordInfo.phonetic,
							translation:this.wordInfo.annotation,
							wordId:this.wordInfo.id,
							bookId:this.bookId
						}
						console.log("传递的数",data);
						await addCollect(data).then(res=>{
							console.log("dddd",res);
							if(res.code ===200) {
								uni.showToast({
									title:"收藏成功",
									icon:'success',
									duration:1000
								})
								// this.showStatus(this.wordInfo.id)
								this.status = 1
							}
						})
					}  else {
						await cancelStatus(this.wordInfo.id).then(res=>{
							if(res.code === 200) {
								uni.showToast({
									title:"取消收藏成功",
									icon:'success',
									duration:1000
								})
								// this.showStatus(this.wordInfo.id)
								this.status = 0
								
							} else {
								uni.showToast({
									title:res.msg,
									icon:'error',
									duration:1000
								})
							}
						})
					}
				} else {  //加入难词库    
					if(bool) {
						console.log("加入难词库");
						let data ={
							wordId:this.wordInfo.id,
							bookId:this.bookId
						}
						console.log("传递的数",data);
						await addHard(data).then(res=>{
							console.log("dddd",res);
							if(res.code ===200) {
								uni.showToast({
									title:"添加难词本成功",
									icon:'success',
									duration:1000
								})
								// this.showHardStatus(this.wordInfo.id)
								this.hardStatus = 1
							}
						})
					} else {
						console.log("取消难词库");
						await cancelHardWord(this.wordInfo.id).then(res=>{
							if(res.code === 200) {
								uni.showToast({
									title:"取消难词库成功",
									icon:'success',
									duration:1000
								})
								// this.showHardStatus(this.wordInfo.id)
								this.hardStatus = 0
								
							} else {
								uni.showToast({
									title:res.msg,
									icon:'error',
									duration:1000
								})
							}
						})
					}
				}
			},
			//查询单词状态
			async showStatus(wordId){
				await getStatus(this.wordInfo.id).then(res=>{
					console.log("statusstatus",res);
					this.status = res.data
				})
			},
			//查询难词状态
			async showHardStatus(wordId){
				await getHardStatus(this.wordInfo.id).then(res=>{
					console.log("hardhard",res);
					if (res.code == 200) {
						this.hardStatus = res.data
					} 
				})
			},
			
			// 查询
			async getWordDetailsSearch(id) {
				console.log("iddddddddd",id);
				
				
				const { data } = await searchWord(id)
				this.wordInfo = data
			},
			// 课本复习
			// async getWordDetailsReview(id) {
			// 	const { data } = await reviewWordBook(id)
			// 	this.words = data
			// 	if (this.words && this.words.length > 0) {
			// 		this.wordInfo = this.words[this.currentStep - 1]
			// 	} else {
			// 		this.wordInfo = null
			// 	}
			// },
			// 计划复习
			// async getWordDetailsPlan(id) {
			// 	const { data } = await reviewWordPlan(id)
			// 	this.words = data
				
			// 	if (this.words && this.words.length > 0) {
			// 		this.wordInfo = this.words[this.currentStep - 1]
			// 	} else {
			// 		this.wordInfo = null
			// 	}
			// },
			// 单元学习
			// async getWordData(id) {
			// 	let params = {
			// 		page: 1,
			// 		size: 2000,
			// 		data: id
			// 	}
			// 	const { data } = await listWord(params)
			// 	this.words = data
			// 	if (this.words && this.words.length > 0) {
			// 		this.wordInfo = this.words[this.currentStep - 1]
			// 	} else {
			// 		this.wordInfo = null
			// 	}
			// },
			// 计划学习
			// async getWordByPlan(id){
			// 	const { data } = await wordByPlan(id)
			// 	this.words = data
				
			// 	if (this.words && this.words.length > 0) {
			// 		this.wordInfo = this.words[this.currentStep - 1]
			// 	} else {
			// 		this.wordInfo = null
			// 	}
			// }
		}
	}
</script>

<style lang="scss" scoped>
.word_details_box {
	height: 100vh;
	background: $uni-bg-color-page;
	
	.header {
		
		
		.title {
			width: 100%;
			height: 100%;
			line-height: 88rpx;
			text-align: center;
			color: $uni-text-color;
			font-size: 28rpx;
		}
		
		.icons {
			display: flex;
			
			.icon_item {
				margin-left: 10rpx;
			}
		}
	}
	
	.box {
		height: calc(100% - 120rpx - 44px - env(safe-area-inset-bottom));
		// background-color: #f5f5f5;
		
		.scroll_view {
			height: 100%;
		}
		
		.word_item {
			margin: 30rpx;
			background-color: $uni-bg-color-opacity;
			border-radius: 16rpx;
			background-color: $uni-bg-color;
			padding: 10rpx;
			
			.word_title {
				font-size: 48rpx;
				font-weight: bold;
			}
			
			.audios {
				margin: 20rpx 0;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #bbcdd7;
				
				.audio {
					padding: 8rpx 24rpx;
					margin-right: 20rpx;
					background-color: #cccbff;
					border-radius: 50rpx;
					font-size: 28rpx;
					color: $uni-text-color;
				}
			}
			
			.text {
				font-size: 28rpx;
				color: $uni-text-color;
			}
		
			.title {
				width: 108rpx;
				display: inline-block;
				font-size: 28rpx;
				border: 2rpx solid #929292;
				border-radius: 6rpx;
				text-align: center;
				
				// &::after {
				// 	content: '';
				// 	width: 100%;
				// 	height: 6rpx;
				// 	display: block;
				// 	background-color: $uni-bg-color-opacity;
				// }
			}
		
			.item_box {
				padding: 30rpx;
			}
		}
		
	}
	
	.btns {
		width: 100%;
		height: calc(env(safe-area-inset-bottom) + 112rpx);
		padding: 30rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
		
		.btn {
			width: 160rpx;
			height: 100%;
			line-height: 50rpx;
			text-align: center;
			border-radius: 50rpx;
			font-size: 28rpx;
		}
		
		.btn1 {
			background-color: $uni-color-primary;
			color: $uni-text-color-inverse;
		}
		
		.btn2 {
			background-color: $uni-bg-color-opacity;
			color: $uni-text-color-primary;
		}
		
		.btn3 {
			color: $uni-text-color;
			border: 1rpx solid $uni-border-color;
		}
	}
}

</style>
